<template>
    <div class="wrapBox">
        <div class="swiperBox" v-if="swiperShow">
            <!-- <mt-swipe :auto="0" :speed='10' :show-indicators="false"> -->
            <mt-swipe :auto="40" :speed='10' :show-indicators="false">
                <!-- <mt-swipe-item><img src="http://thirdwx.qlogo.cn/mmopen/MKSUPLNLibJtwJPubIAfJCmibWeg9zvMZeWZJesBBaoibG7Viac4LT18rJ47icDP30hia4MHiaMJg4Oic4m96mfXNVpYrONMSg1cd9Ah/132" alt=""></mt-swipe-item>
                <mt-swipe-item><img src="http://thirdwx.qlogo.cn/mmopen/dibCvqHg4WndblR0t0hXXia65bqnkFAM83RqRJjHpk578FxPAROEWlp7B4TtE8jFJARZZ8XO9ZD92BArns3VYvicg/132" alt=""></mt-swipe-item>
                <mt-swipe-item><img src="http://thirdwx.qlogo.cn/mmopen/dibCvqHg4WndcMHgEPxMcVoj3wIvkdagneqzTKrpcgItLfvMbfjWWflXiatOEDBc4qM9Vk6mtEXnZicJ5icyvFW1oFhdk2SNZaibc/132" alt=""></mt-swipe-item> -->
                <mt-swipe-item  v-for="(item,index) in prizeList" :key="index">
                    <img :src="item.img" alt="">
                </mt-swipe-item>
            </mt-swipe>
            <!-- <p class="overScroll" @click="overScroll">点击停止</p> -->
        </div>
        <div class="getPrizeBox" v-if="showOverPrize">
            <img :src="prizeList[showImg].img" alt="" class="showImg">
        </div>
        <p class="getPirze" @click="getPirze" v-if="canGetPrize"></p>
        <div class="postBox" v-if="postShow">
            <p class="postTopImg"></p>
            <div class="userPostPhone">
                <input v-fixedInput v-model="userPostInfo.mobile" type="text" placeholder="请输入您的手机号">
            </div>
            <div class="userPostCode">
                <div class="left">
                    <input v-fixedInput v-model="userPostInfo.code" type="text" placeholder="请输入验证码">
                </div>
                <div class="right">
                    <div class="writeinfo_code_btn saclebtn" @click="clickCode">{{VerShowTxt}}</div>
                </div>
            </div>
            <div class="postBtn">
                <p class="sure">确定</p>
                <p class="clo">关闭</p>
            </div>
        </div>
        <share :isshare="isshare"></share>
        <Bottom :baseText="baseText"></Bottom>
    </div>
</template>
<script>
import { MessageBox } from "mint-ui";
import request from "@/utils/request";
import axios from "axios";
import Qs from "qs";
import wx from "weixin-js-sdk";
import * as config from "./config";
import Cookies from "js-cookie";
import Share from "./components/Share";
import Bottom from "@/components/common/Bottom";
import utils from "@/utils/utils";
import music from "./components/music";
import { Swipe, SwipeItem } from 'mint-ui';
// Vue.component(Swipe.name, Swipe);
// Vue.component(SwipeItem.name, SwipeItem);
export default {
    // 引入组件
    components : {
        share: Share,
        Bottom: Bottom,
        music: music
    },
    data(){
        return {
            openid: Cookies.get("openid"),
            userInfo: null, //用户信息
            receiveSpreadInfo: {
                channel: 0, //渠道
                fuid: "", //传播者的openid
                ouid: "" //销售或渠道的openid
            },
            prizeList:[
                {
                    img:'http://assets.rurushishi.com/activies/gzld/prize1.png'
                },
                {
                    img:'http://assets.rurushishi.com/activies/gzld/prize2.png'
                },
                {
                    img:'http://assets.rurushishi.com/activies/gzld/prize3.png'
                },
                {
                    img:'http://assets.rurushishi.com/activies/gzld/prize4.png'
                },
                {
                    img:'http://assets.rurushishi.com/activies/gzld/prize5.png'
                },
                {
                    img:'http://assets.rurushishi.com/activies/gzld/share.png'
                }
            ],
            isshare: false, //是否开启分享 也用于从别的页面返回回来展示分享
            baseText: config.BASE_TEXT, //页脚文本
            swiperShow:true,
            showOverPrize:false,
            showImg:0,
            canGetPrize:false,
            prizeId:0,
            postShow:false,
            userPostInfo:{
                mobile:'',
                code:''
            },
            IsCanVer: true, //是否能发送验证码
            VerShowTxt: "获取验证码",
            VerShowSec: 300, //读秒
        }
    },
    methods:{
        getPirze(){
            console.log(this.prizeId)
        },
        //请求点击抽奖数据,中奖操作
        getlotteryPrizeNum() {
        let _self = this;
        let query = {
            activityId: config.activityId,
            openId: Cookies.get("openid"),
            projectId: config.projectId,
            type: 2,
        };
        axios
            .post(
            `${_self.global.API_FORUM_URL}/api/activity/luckyDraw?${Qs.stringify(
                query
            )}`,
            {}
            )
            .then(response => {
            console.info(response.key)
                _self.showImg = response.key-1;
                _self.prizeId = response.prizeId;
                if(response.key == 6){
                    return MessageBox.alert('谢谢参与', "提示");
                }
            });
        },
        clickCode(){
            let that = this;
            if (that.IsCanVer) {
                var phone = that.userPostInfo.mobile;
                if (phone.length == 0) {
                MessageBox.alert("请输入手机号！");
                } else if (!utils.isMobile(phone)) {
                MessageBox.alert("请输入正确的手机号！");
                } else {
                that.IsCanVer = false;
                that.VerShowTxt = that.VerShowSec + "s";
                that.VerShowSec--;
                setInterval(function() {
                    if (that.IsCanVer == false) {
                    if (that.VerShowSec == 0) {
                        that.VerShowTxt = "获取验证码";
                        that.IsCanVer = true;
                        that.VerShowSec = 60;
                    } else {
                        that.VerShowTxt = that.VerShowSec + "s";
                        that.VerShowSec--;
                    }
                    }
                }, 1000);
                that.getSmsCode().then(function(data) {
                    MessageBox.alert("验证码已发送到您的手机！");
                });
                }
            }
        },
            // 获取验证码
    getSmsCode() {
      let that = this;
      return new Promise(function(resolve, reject) {
        request
          .post(
            `${that.global.API_ACT_URL}getSmsCode?activityId=${
              config.activityId
            }&mobile=${that.userPostInfo.mobile}`,
            {}
          )
          .then(function(data) {
            resolve(data);
          });
      });
    },
        overScroll(){
            this.swiperShow = false;
            this.showOverPrize = true;
            this.canGetPrize = true
            console.log(1234)
        },
        // 直接跳转本项目的其他链接
        gotoUrl(page) {
        // 带上本页面的传播信息
        let url =
            location.protocol +
            "//" +
            location.host +
            this.global.GLOBAL_BASE_PATH +
            "/";
        let fullPathNoShare = this.$route.fullPath;
        fullPathNoShare = fullPathNoShare.replace("?isshare=1", "");
        fullPathNoShare = fullPathNoShare.replace("&isshare=1", "");
        if (fullPathNoShare.indexOf("?") > -1) {
            url += page + "?" + fullPathNoShare.split("?")[1];
        } else {
            url += page;
        }
        location.href = url;
        },
        // 通过路由方式跳转本项目的其他链接(跳转到无需授权的)
        pushUrl(page) {
        // 带上本页面的传播信息
        let url = "";
        let fullPathNoShare = this.$route.fullPath;
        fullPathNoShare = fullPathNoShare.replace("?isshare=1", "");
        fullPathNoShare = fullPathNoShare.replace("&isshare=1", "");
        if (fullPathNoShare.indexOf("?") > -1) {
            url = page + "?" + fullPathNoShare.split("?")[1];
        } else {
            url = page;
        }
        this.$router.push("/" + url);
        },
        /**
         * 初始化
         * 1、设置传播传播信息
         * 2、获取用户信息
         * 3、设置分享信息
         */
        init() {
            console.log(2134)
        let that = this;
        // 设置传播信息
        if (this.$route.query.channel)
            this.receiveSpreadInfo.channel = this.$route.query.channel;
        if (this.$route.query.fuid)
            this.receiveSpreadInfo.fuid = this.$route.query.fuid;
        if (this.$route.query.ouid)
            this.receiveSpreadInfo.ouid = this.$route.query.ouid;
        if (this.$route.query.isshare) that.isshare = true;
        config.getUserInfo().then(function(userInfo) {
            that.userInfo = userInfo;
            // 设置分享 标题 链接 回调
            let shareObj = {
            title: "",
            link: ""
            };
            if (
            that.userInfo &&
            that.userInfo.user &&
            that.userInfo.user.nickname
            ) {
            shareObj.title = `${
                that.userInfo.user.nickname
            }邀请你跟我一起读语音赢奖品，读出你的“国际范儿”`;
            }

            if (that.userInfo.salerOrAgent) {
            // 是销售或者渠道,更新ouid
            shareObj.link = `${config.SHARE_LINK}?channel=${
                that.receiveSpreadInfo.channel
            }&fuid=${that.openid}&ouid=${that.openid}`;
            } else {
            shareObj.link = `${config.SHARE_LINK}?channel=${
                that.receiveSpreadInfo.channel
            }&fuid=${that.openid}${
                that.receiveSpreadInfo.ouid
                ? "&ouid=" + that.receiveSpreadInfo.ouid
                : ""
            }`;
            }
            config.initShare(shareObj);
            that.global.SHARE_CALLBACK_OK = function(type) {
            that.shareCallBack();
            };
        });
        }
    },
    mounted(){

    },
    created(){
        this.init()
        // this.getlotteryPrizeNum()
        let _self = this;
        window.setTimeout(function(){
            console.log(1213)
            _self.overScroll()
        }, 3000)
    }
}
</script>
<style lang="stylus" scoped>
.wrapBox{
    width 100%
    height 100%
    min-height 12.06rem
    background url('http://assets.rurushishi.com/activies/gzld/prizeBg.jpg') no-repeat center
    background-size 100% 100%
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.swiperBox,.getPrizeBox{
    width 3.6rem
    height 3.6rem
    position absolute
    left 50%
    top 23.71%
    margin-left -1.8rem
    z-index 999
}
.mint-swipe{
    width 100%
    height 100%
    border-radius 50%
}
.mint-swipe-item{
    width 100%
    height 100%
}
.mint-swipe-item img{
    width 100%
    height 100%
    display block
}
.showImg{
    width 100%
    height 100%
    display block
    border-radius 50%
}
.getPirze{
    width 1.86rem
    height .62rem
    position: absolute;
    top: 60.53%;
    left: 50%;
    margin-left -.93rem
    background url('http://assets.rurushishi.com/activies/gzld/getPrize.png') no-repeat center
    background-size 100% 100%
}
.postBox{
    width 100%
    height 100%
    min-height 12.06rem
    background url('http://assets.rurushishi.com/activies/gzld/postBg.jpg') no-repeat center
    background-size 100% 100%
    position: absolute
    top: 0
    left: 0
    bottom: 0
    right: 0
    z-index 999
}
.postTopImg{
    width 3.96rem
    height 3.75rem
    position: absolute;
    top: 22%;
    left: 50%;
    margin-left -1.98rem
    background url('http://assets.rurushishi.com/activies/gzld/moneyTop.png') no-repeat center
    background-size 100% 100%
}
.userPostPhone input{
    width 3.96rem
    height .57rem
    border: 1px solid #e91766
    border-radius 4px
    position: absolute;
    top: 56%;
    left: 50%;
    margin-left -1.98rem
}
.userPostCode{
    width 3.96rem
    height .57rem
    position: absolute;
    top: 63%;
    left: 50%;
    margin-left -1.98rem
}
.userPostCode input{
    width 2.22rem
    height .57rem
    border: 1px solid #e91766
    border-radius 4px
    float left
}
.right{
    width 1.6rem
    height .57rem
    line-height .57rem
    border-radius 4px
    border: 1px solid white
    color white
    background #ea1d6a
    float right 
    text-align center
}
.postBtn{
    width 3.96rem
    height .57rem
    position: absolute;
    top: 70%;
    left: 50%;
    margin-left -1.98rem
}
.sure{
    width 1.63rem
    height .57rem
    line-height .57rem
    border-radius 4px
    border: 1px solid white
    color white
    background #ea1d6a
    float left  
    text-align center
}
.clo{
    width 1.63rem
    height .57rem
    line-height .57rem
    border-radius 4px
    border 1px solid #ea1d6a
    color black
    background white
    float right   
    text-align center 
}
</style>
